<template>
  <view v-if="!isLogin" class="login-overlay" @tap="goToLogin">
    <view class="login-prompt">
      <text class="prompt-text">🔒</text>
      <text class="prompt-text">{{ promptText }}</text>
      <text class="prompt-subtext">点击任意位置前往登录</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  isLogin: {
    type: Boolean,
    required: true
  },
  promptText: {
    type: String,
    default: '请登录后使用'
  }
})

const emit = defineEmits(['goToLogin'])

const goToLogin = () => {
  emit('goToLogin')
}
</script>

<style scoped>
/* 未登录提示 */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(245, 245, 245,1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-prompt {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 48rpx;
  text-align: center;
  width: 80%;
}

.prompt-text {
  display: block;
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

.prompt-subtext {
  font-size: 24rpx;
  color: #999999;
}
</style>